<template>
  <div class="lix-ctg">
    <scroll-view scroll-y class="lix-ctg__scroll--left" v-bind:style="{ height: winHeight + 'px' }" @scroll="leftScroll">
      <div v-for="(item, idx) in listData" :key="idx" class="lix-ctg--left-item" @click="leftScrollTap" :data-idx="idx">
        <p v-bind:class="[idx === currentIdx ? 'lix-ctg--left-item.is-active' : '']">{{ item.name }}</p>
      </div>
    </scroll-view>

    <scroll-view scroll-y class="lix-ctg__scroll--right" v-bind:style="{ height: winHeight + 'px' }" :scroll-with-animation="false" :scroll-top="scroll_top" @scroll="rightScroll" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
      <div class="lix-ctg__scroll--header">
        <!-- <div>
          <p>{{ listData[currentIdx].name }}</p>
          <p class="lix-ctg__scroll--desc">{{ listData[currentIdx].spread.description }}</p>
        </div> -->
        <image :src="listData[currentIdx].spread.image"/>
      </div>
      <div class="lix-ctg__scroll--right-item" v-for="(item, idx) in listData[currentIdx].children" :key="idx">
        <div class="lix-ctg__scroll--right-title">
          <div class="lix-ctg__scroll--seperate"></div>
          <p>{{ item.name }}</p>
          <div class="lix-ctg__scroll--seperate"></div>
        </div>

        <div class="lix-ctg__right">
          <div class="lix-ctg__right--item" v-for="(obj, index) in item.children" :key="index" @click="rightItemClick" :data-item-idx="index" :data-wrap-idx="idx" :data-type="obj.type" :data-goodsid="obj.goods_id">
            <image :src="obj.image"/>
            <p>{{ obj.name }}</p>
          </div>
        </div>
     </div>
    </scroll-view>
  </div>
</template>

<script>
import { CATEGORY_GET_LIST } from '../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      winHeight: 0,
      currentIdx: 0,
      scroll_top: 0,
      willEnterPrev: 0
    };
  },
  onReady() {
    const self = this;
    wx.getSystemInfo({
      success: res => {
        console.log(res);
        self.winHeight = res.windowHeight;
      }
    });
    console.log(this.listData);
  },
  created() {
    this.getListData();
  },
  computed: {
    ...mapGetters('category', {
      listData: 'data'
    })
  },
  methods: {
    ...mapActions('category', {
      'getListData': CATEGORY_GET_LIST
    }),
    // 左边滚动视图的滚动事件
    leftScroll(e) {
    },
    // 左边滚动视图的点击事件
    leftScrollTap(e) {
      // 将点击的index赋值给组件变量
      const idx = e.mp.currentTarget.dataset.idx;
      this.currentIdx = idx;
      this.scroll_top = 0;
    },
    // 右边栏 滚动事件
    rightScroll(e) {
      const scrollHeight = e.mp.detail.scrollHeight;
      const scrollTop = e.mp.detail.scrollTop;
      // console.log(`scrollHeight = ${scrollHeight}, scrollTop = ${scrollTop}, 差值: ${scrollHeight - scrollTop}`);
      const difference = scrollHeight - scrollTop;
      if (difference === 555) {
        if (this.currentIdx < this.listData.length - 1) {
          // this.currentIdx += 1;
        }
      } else if (difference === scrollHeight) {
        if (this.currentIdx < this.listData.length - 1 && this.currentIdx > 0) {
          // this.currentIdx -= 1;
        }
      }
    },
    scrolltoupper(e) {
      console.log(e);
      // this.willEnterPrev += 1;
      // if (this.willEnterPrev > 1 && this.currentIdx < this.listData.length - 1 && this.currentIdx > 0) {
      //   this.currentIdx -= 1;
      //   this.willEnterPrev = 0;
      // }
    },
    scrolltolower(e) {
      console.log(e);
      // if (this.currentIdx < this.listData.length - 1) {
      //   this.currentIdx += 1;
      //   this.willEnterPrev = 0;
      // }
    },
    rightItemClick(e) {
      const self = this;
      console.log(e);
      const type = e.mp.currentTarget.dataset.type;
      if (type === 'goods') {
        const goodsid = e.mp.currentTarget.dataset.goodsid;
        wx.navigateTo({
          url: '/pages/product?id=' + goodsid
        });
        return;
      }
      const wrapIdx = e.mp.currentTarget.dataset.wrapIdx;
      const itemIdx = e.mp.currentTarget.dataset.itemIdx;
      wx.navigateTo({
        url: '/pages/shoplist?cat-idx=' + self.currentIdx + '&wrap-idx=' + wrapIdx + '&item-idx=' + itemIdx
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/category.scss";
#green {
  // background-color: white;
  width: 100px;
  height: 500px;
}
#yellow {
  // background-color: white;
  width: 100px;
  height: 500px;
}
#red {
  // background-color: white;
  width: 100px;
  height: 500px;
}
</style>
